<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE模板渲染相关知识</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

    <div id="app">
 

      <!-- const app= Vue.createApp({ 
        data() {
            return {
  
                message: "<i>唯爱薇o朝圣之路</i>"
            }
        },
        methods: {
            manualExecute() {
                alert("manualExecute ：edu_vlovev_cn 手动弹窗显示")
            },
            updateMessage() {
              this.message = this.message == 'edu.vlovev.cn' ? "唯爱薇o朝圣之路" : "edu.vlovev.cn"
            }
        },
        //用v-html指定渲染变量message中的html标签，v-once指定message变量只渲染一次。在这里updateMessage方法就不再有用了
        template:`
            <h2 v-on:click="updateMessage" v-html="message" v-once > </h2>
        `
  
      }).mount("#app") -->





      <!-- v-bind:即单向绑定,比如给dom元素添加一个属性 -->
      <!-- const app= Vue.createApp({ 
        data() {
            return {
  
                message: "<i>唯爱薇o朝圣之路</i>",
                title: "唯爱薇o朝圣之路",
                statusCode: 99
  
            }
        },
        methods: {
            manualExecute() {
                alert("manualExecute ：edu_vlovev_cn 手动弹窗显示")
            },
            updateMessage() {
              this.message = this.message == 'edu.vlovev.cn' ? "唯爱薇o朝圣之路" : "edu.vlovev.cn"
            }
        },
        //用v-html指定渲染变量message中的html标签，v-once指定message变量只渲染一次。在这里updateMessage方法就不再有用了
        //字面量:即插值表达式支持简单的三元运算符和算术运算，但不支持if、for 等条件运算
        //v-bind:即单向绑定,比如给dom元素添加一个属性
        template:`
            <h2 v-on:click="updateMessage" v-html="message" v-bind:title="title" > </h2>
            <hr />
  
            <div class="statusResult">{{ statusCode > 100 ?  '状态不正常' : '状态正常' }}</div>
            <hr />
  
            <div class="mathCount">{{ 100 + 3000 }}</div>
        `
      }).mount("#app") -->






    </div>
    


<script>

    const app= Vue.createApp({ 
      data() {
          return {

              message: "<i>edu_vlovev_cn</i>",
              name: "title",
              value: "唯爱薇o朝圣之路",
              mouseEvent: "click",
              KeyboardEvent: "keyDown",
              statusCode: 99

          }
      },
      methods: {
          manualExecute() {
              alert("manualExecute ：edu_vlovev_cn 手动弹窗显示")
          },
          updateMessage() {
            this.message = this.message == 'edu.vlovev.cn' ? "唯爱薇o朝圣之路" : "edu.vlovev.cn"
          },
          avoidDefaultEvent(e) {
            e.preventDefault()
            console.log("avoidDefaultEvent：阻止默认事件")
            alert("avoidDefaultEvent：阻止默认事件")
          },
          preventDefaultEvent() {
            console.log("preventDefaultEvent：阻止默认事件")
            alert("preventDefaultEvent：阻止默认事件")
          }
      },
      //用v-html指定渲染变量message中的html标签，v-once指定message变量只渲染一次。在这里updateMessage方法就不再有用了。
      //字面量:即插值表达式支持简单的三元运算符和算术运算，但不支持if、for 等条件运算。
      //v-bind:即单向绑定,比如给dom元素添加一个属性。
      //其中v-on:click="" 与 @click="" 这两种写法是等价的。
      //其中v-bind:varname 与 :varname 这两种写法是等价的。
      //Example.
      //<h2 v-on:click="updateMessage" v-html="message" v-bind:title="value" > </h2>
      //<h2 @click="updateMessage" v-html="message" v-bind:title="value" > </h2>
      //<h2 @click="updateMessage" v-html="message" :title="value" > </h2>      
      //模板动态参数[动态DOM属性][动态事件属性]
      //用:[name] 替换:title
      //<h2 @click="updateMessage" v-html="message" :[name]="value"> </h2>
      //用@[mouseEvent]替换:@click
      //<h2 @[mouseEvent]="updateMessage" v-html="message" :[name]="value"> </h2>

      //VUE中的鼠标事件有如下这些：
      //@click      //单击
      //@mousedown  //按下
      //@mouseup    //抬起
      //@dblclick   //双击
      //@mousemove  //移动
      //@mouseleave //离开
      //@mouseout   //移出
      //@mouseenter //进入
      //@mouseover  //在上面

      //VUE中的键盘事件有如下这些：
      //@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)

      //获取按键的键码     e.keyCode

      //@keyup.13         按回车键
      
      //@keyup.enter      回车
      
      //@keyup.up         上键
      
      //@keyup.down       下键
      
      //@keyup.left       左键
      
      //@keyup.right      右键
      
      //@keyup.delete     删除键   

      //阻止默认事件：写法一
      //<form action="https://edu.vlovev.cn" @click="avoidDefaultEvent">

      //  methods: {
      //    avoidDefaultEvent(e) {
      //      e.preventDefault()
      //      console.log("avoidDefaultEvent：阻止默认事件")
      //      alert("avoidDefaultEvent：阻止默认事件")
      //    },
      //    preventDefaultEvent() {
      //      console.log("preventDefaultEvent：阻止默认事件")
      //      alert("preventDefaultEvent：阻止默认事件")
      //   }
      //  }
      
      //阻止默认事件：写法二
      //这种写法更简洁
      //<form action="https://edu.vlovev.cn" @click.prevent="preventDefaultEvent">

      //  methods: {
      //    preventDefaultEvent() {
      //      console.log("preventDefaultEvent：阻止默认事件")
      //      alert("preventDefaultEvent：阻止默认事件")
      //   }
      //  }


      //注意style属性class中的三元运算符用法
      //template:`
      //    <h2 @[mouseEvent]="updateMessage" v-html="message"  :[name]="value"    :class=" message == '唯爱薇o朝圣之路' ? 'red' : 'green' "> </h2>
      //    <hr />
      //  
      //    <div class="statusResult">{{ statusCode > 100 ?  '状态不正常' : '状态正常' }}</div>
      //    <hr />
      //  
      //    <div class="mathCount">{{ 100 + 3000 }}</div>
      //    <hr />
      //    <form action="https://edu.vlovev.cn" @click="avoidDefaultEvent">
      //      <button type="submit">进入学习</button>
      //    </form>
      // `

      //注意v-if运算符用法
      template:`
          <h2 @[mouseEvent]="updateMessage" v-html="message" v-if="message=='唯爱薇o朝圣之路'" class="green"> </h2>
          <h2 @[mouseEvent]="updateMessage" v-html="message" v-else-if="message=='edu.vlovev.cn'" class="red"> </h2>
          <h2 @[mouseEvent]="updateMessage" v-html="message" v-else class="yellow"> </h2>
          <hr />

          <div class="statusResult">{{ statusCode > 100 ?  '状态不正常' : '状态正常' }}</div>
          <hr />

          <div class="mathCount">{{ 100 + 3000 }}</div>
          <hr />
          <form action="https://edu.vlovev.cn" @click="avoidDefaultEvent">
            <button type="submit">进入学习</button>
          </form>
      `


      
    }).mount("#app")

</script>

<style>
  .red {color:red;}
  .green {color:green}
  .yellow {color:yellow}
</style>

</body>
</html>